<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Docusaurus v2.0.0-alpha.53">
<link rel="preconnect" href="https://www.google-analytics.com">
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41480445-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview")</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>

<title data-react-helmet="true">Base - Pure</title>

<meta data-react-helmet="true" charset="utf-8"><meta data-react-helmet="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-react-helmet="true" property="og:title" content="Base - Pure"><meta data-react-helmet="true" name="description" content="Leveraging Normalize.css, an HTML5-ready alternative to CSS resets."><meta data-react-helmet="true" property="og:description" content="Leveraging Normalize.css, an HTML5-ready alternative to CSS resets."><meta data-react-helmet="true" name="twitter:card" content="summary_large_image">

<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200">


<link rel="stylesheet" href="/styles.e0d41c52.css">


<link rel="preload" href="/styles.59801a08.js" as="script">

<link rel="preload" href="/runtime~main.5e4f6629.js" as="script">

<link rel="preload" href="/main.596eb772.js" as="script">

<link rel="preload" href="/common.71de0887.js" as="script">

<link rel="preload" href="/2ad3d225.7a85cb03.js" as="script">

</head>
<body>

<div id="__docusaurus">
<div id="layout"><a href="#menu" id="menuLink" class="menu-link"><span></span></a><div id="menu"><div class="pure-menu"><a class="pure-menu-heading" href="/">Pure</a><ul class="pure-menu-list"><li class="pure-menu-item"><a class="pure-menu-link" href="/start/">Get Started</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/layouts/">Layouts</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/base/">Base</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/grids/">Grids</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/forms/">Forms</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/buttons/">Buttons</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/tables/">Tables</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/menus/">Menus</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/tools/">Tools</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/customize/">Customize</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/extend/">Extend</a></li><li class="pure-menu-item"><a href="https://github.com/pure-css/pure/releases/" class="pure-menu-link">Releases</a></li></ul></div></div><div id="main" class="base"><div class="header"><h1>Base</h1><h2>Leveraging Normalize.css, an HTML5-ready alternative to CSS resets.</h2></div><div class="content"><h2 id="the-foundation" class="content-subhead">The Foundation<a href="#the-foundation" class="content-link" title="Heading anchor"></a></h2><p>All modules in Pure build on top of <a href="https://necolas.github.io/normalize.css/">Normalize.css</a>. It&#x27;s our foundational layer to maintain some degree of cross-browser consistency. You can pull in Normalize.css by adding this <code>&lt;link&gt;</code> element on your page:</p><div><div class="code code-wrap"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">link</span> <span class="hljs-attr">rel</span>=<span style="color:#219161">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;https://unpkg.com/purecss@1.0.1/build/base-min.css&quot;</span>&gt;</span></code></pre></div></div><h3>A bit about Normalize.css</h3><p><a href="https://necolas.github.io/normalize.css/">Normalize.css</a> is an open-source project by <a href="http://twitter.com/necolas">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal">Jonathan Neal</a>. <a href="http://nicolasgallagher.com/about-normalize-css/">In their own words</a>:</p><blockquote class="content-quote">Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.&quot;</blockquote><p>Normalize.css comes with <a href="https://github.com/necolas/normalize.css/wiki">great documentation</a> and a <a href="http://nicolasgallagher.com/about-normalize-css/">thorough guide</a> explaining how it differs from a traditional reset.</p><h2 id="extras" class="content-subhead">Extras<a href="#extras" class="content-link" title="Heading anchor"></a></h2><p>In addition to Normalize.css rules, Pure&#x27;s Base module contains some common styles that are used by most websites.</p><h3>Hiding Elements</h3><p>Add the <code>hidden</code> attribute to an HTML element to hide it from the screen via <code>display: none !important;</code>. Alternatively, for compatibility with old IE, you may use the CSS classname <code>.hidden</code>.</p><div><div class="code code-wrap"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">input</span> <span class="hljs-attr">type</span>=<span style="color:#219161">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span style="color:#219161">&quot;_csrf&quot;</span> <span class="hljs-attr">hidden</span>&gt;</span></code></pre></div></div><h3>Responsive Images</h3><p>Add the <code>.pure-img</code> class name to an <code>&lt;img&gt;</code> element to make it scale with the viewport. This is handy when building responsive websites.</p><div><div class="code code-wrap"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">img</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-img&quot;</span> <span class="hljs-attr">src</span>=<span style="color:#219161">&quot;...&quot;</span>&gt;</span></code></pre></div></div><h2 id="moving-beyond-normalize" class="content-subhead">Moving beyond Normalize<a href="#moving-beyond-normalize" class="content-link" title="Heading anchor"></a></h2><p>Normalize.css is a great starting place for your project, but some HTML elements such as forms, tables, and menus require more styling than what&#x27;s provided by Normalize.</p><p>We made a more opinionated look and feel for these elements, while keeping them minimal enough so that you can customize them for your site or app&#x27;s needs. Check out our CSS for <a href="/forms">Forms</a>, <a href="/tables">Tables</a>, and <a href="/menus">Menus</a>.</p></div><div class="footer"><div class="legal pure-g"><div class="pure-u-1 u-sm-1-2"><p class="legal-license">This site is built with ❤️ using Pure v2.0.5<br>All code on this site is licensed under the <a href="https://github.com/pure-css/pure/blob/master/LICENSE">Yahoo BSD License</a> unless otherwise stated.</p></div><div class="pure-u-1 u-sm-1-2"><ul class="legal-links"><li><a href="https://github.com/pure-css/pure/">GitHub Project</a></li><li><a href="https://hackerone.com/yahoo/">Security Contact Info</a></li></ul><p class="legal-copyright">© 2014 - Present Yahoo! Inc. All rights reserved.</p></div></div></div></div></div>
</div>

<script src="/styles.59801a08.js"></script>

<script src="/runtime~main.5e4f6629.js"></script>

<script src="/main.596eb772.js"></script>

<script src="/common.71de0887.js"></script>

<script src="/2ad3d225.7a85cb03.js"></script>


</body>
</html>